<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-07 21:38:23
 * @LastEditTime: 2019-11-07 22:20:40
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>event-loop 事件轮询</p>
  <div>js 单线程-同一时间只能做一件事</div>
  <div>原因-避免DOM渲染冲突</div>
  <div>解决方案-异步</div>
  <div>实现方式 - event-loop</div>
  <div>event-loop</div>
  <div>事件轮询，js实现异步的具体决绝方案</div>
  <div>同步代码直接执行</div>
  <div>异步函数放在异步队列中</div>
  <div>待同步函数执行完毕，轮询执行异步队列的函数</div>
  <div>遵循先进后出原则</div>
  <div>什么是轮询？？？？？</div>
  <div>
    当所有主进行中的代码执行完毕之后， 
    event-loop 会一直监听轮询异步队列，
    如果发现异步队列中有函数，
    则会立刻把异步队列中的代码放入主进程中并且立刻执行，
    执行完毕之后再进行轮询监听异步队列
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    /* 
    当所有主进行中的代码执行完毕之后 
    event-loop 会一直监听轮询异步队列，
    如果发现异步队列中有函数，
    则会立刻把异步队列中的代码放入主进程中并且立刻执行

      执行解析
      主进程                        异步队列
      console.log(200);             
                                    // 立刻放入
                                    function () {
                                      console.log(100);
                                    }
    */
    /* setTimeout(() => {
      console.log(100);
    });
    console.log(200); */

    /* 
      执行解析
      主进程                        异步队列
      console.log(3);             
                                  // 立刻放入
                                  function () {
                                    console.log(2);
                                  }
                                  // 1000毫秒之后放入异步进程
                                  function () {
                                    console.log(1);
                                  }
    */
    /* setTimeout(()=>{
      console.log(1);
    },1000)
    setTimeout(() => {
      console.log(2);
    })
    console.log(3); */


    /* 
      执行解析
      主进程                        异步队列
     console.log('d');            
                                  // ajax 执行success之后放入异步队列中，时间未知,可能会比console.log('c');更快
                                  function (data) {
                                    console.log('a->data: ', data);
                                  }
                                  //立刻放入
                                  function() {
                                    console.log('c');
                                  }
                                  // 1000毫秒后放入
                                  function() {
                                    console.log('b');
                                  }
    */
    $.ajax({
      url:'./data.json',
      success: function (data) {
        console.log('a->data: ', data);
      }
    })
    setTimeout(()=>{
      console.log('b');
    },1000)
    setTimeout(() => {
      console.log('c');
    })
    console.log('d');
  </script>
</body>
</html>